<!DOCTYPE html>
<#assign ctx = request.contextPath />
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0 ,maximum-scale=1.0" user-scalable=no>
<title>优惠劵</title>
<link href="${ctx}/assets/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/assets/css/weixing.css" />
<link rel="stylesheet" href="${ctx}/assets/css/hook.css" />
<style>
	body{
		font-family: "微软雅黑";
	}
	.container-fluid{
		background-image: url(${ctx}/assets/img/backdrop.png);
		background-repeat: no-repeat;
		background-size:100% 100%;
		margin-top: 20px;
	}
	#pullDown{
	   	text-align:center;   	
	}
	#pullUp{
		text-align:center;   
	}
</style>
 </head>
 <body>
 <div class="hook" id="hook">
  </div>
 <div id="wrapper">
  	<ul id="thelist">
  
	</ul>
	<div style="text-align:center" id="loadmore">
		点击加载更多
	</div>
  </div>		
<script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
<script src="${ctx}/assets/js/bootstrap.min.js"></script>
<script src="${ctx}/assets/js/mousewheel.js"></script>
<script src="${ctx}/assets/js/hook.js"></script>
<script type="text/javascript">
var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;
function load (page) {
	$.ajax({
             type: "GET",
             url: "${ctx}/wx/v1/coupon2",
             data: {
             'memberId':'${memberId}',
             'pager.offset':(page-1)*10,
             'limit':10
             },	
             dataType: "json",
             success: function(data){ 
             if(data.length==0 && $("li > div").val()==null){
             $("#loadmore").html("暂无优惠劵");
             }
              if(null!=data &&data.length>0 ){
             	 var content="";
             	 var couponMoney,couponCode,couponStatus,startDate,endDate;
				  $.each(data, function (i,order) {  
				  couponMoney=order.couponMoney;
				  couponCode=order.couponCode;
				  couponStatus=order.couponStatus;
				  startDateStr=order.startDateStr;
				  endDateStr=order.endDateStr;
			         content+='<li class="container-fluid">';
			         content+='<div class="row">';
			         content+='<div class="col-xs-12">';
			         content+='<div class="col-xs-3 col-xs-offset-1">';
			         content+='<h1 style="margin-top:5px;color: #fffc00;">';
			         content+=couponMoney;
			         content+='</h1>';
			         content+='</div>';
			         content+='<div class="col-xs-8" style="margin-top: 5px;">';
			         content+='<h4 style="color: #FFFFFF;">优惠劵码:';
			         content+=couponCode;
			         content+='</h4>';
			         content+='</div>';
			         content+='</div>';
			         content+='</div>';
			         content+='<div class="row">';
			         content+='<div class="col-xs-12">';
			         content+='<div class="col-xs-4 col-xs-offset-1">';
			         content+='<h4 style="margin-top:0px;margin-left: 5px;color: #FFFFFF;">优惠劵</h4>';
			         content+='</div>';
			         content+='<div class="col-xs-7">';
			         if(couponStatus==2){
			         content+='<h4 style="color:#FFFFFF; margin-top:0px;"><img src="${ctx}/assets/img/ysy.png" style="width: 100px; height: 40px;"></h4>';
			         }else if(couponStatus==3){
			         content+='<h4 style="color:#FFFFFF; margin-top:0px;"><img src="${ctx}/assets/img/ysx.png" style="width: 100px; height: 40px;"></h4>';
			         }
			         content+='</div>';
			         content+='</div>';
			         content+='</div>';
			         content+='<div class="row">';
			         content+='<div class="col-xs-12" style="text-align: center;">';
			         content+='<h5 style="margin-top:0px; color: #dcdcdc;">使用时间:(';
			         content+=startDateStr;
			         content+='-';
			         content+=endDateStr;
			         content+=')</h5>';
			         content+='</div>';
			         content+='</div>';
			         content+='</li>';
			       }); 
			        if(page==1){
			       	 $("#thelist").empty();
			       }
			       $("#thelist").append(content);
			    }else if( $("li > div").val()!=null){
			    	$("#loadmore").html("没有更多优惠劵了");
			    }
	         }
     });	
}
var page = 1;
$(document).ready(function(){
	load(1);
	$('#hook').hook({
		reloadPage:false,
		reloadEl:function(){
			load(1);
			page=1;
			$("#loadmore").html("点击加载更多");
		}
	});
	
	$("#loadmore").click(function(){
		page++;
		if($("#loadmore").html()=="没有更多优惠劵了" || $("#loadmore").html()=="暂无优惠劵" ){
		}else{
			load(page);
		}
	});
});
</script>
</body>
</html>